import React from 'react'
import styled from 'styled-components'

class WelcomeScreen extends React.Component {
  state = {
    count: 2
  }

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({
        count: this.state.count - 1
      })

      if (this.state.count <= 0) {
        this.props.navigation.navigate('Auth')
        clearInterval(this.timer)
      }
    }, 1000)
  }

  componentWillUnmount() {
    this.timer && clearTimeout(this.timer)
  }

  render() {
    return (
      <Container>
        <Text>WelcomeScreen--{this.state.count}</Text>
      </Container>
    )
  }
}

export default WelcomeScreen

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
`

const Text = styled.Text`
  font-size: 20px;
`
